<template>
    <div id="bill-detail">
        <div class="bill-box have-footer wrapper">
            <div class="header">
                <div class="header-money">
                    <p>{{info.repayAmount | toYuan}}</p>
                    <span v-if='info.repayStatus === 0'>应还款金额 (元)</span>
                    <span v-if='info.repayStatus === 40'>已结清金额 (元)</span>
                </div>
                <div class="header-date">
                    <p class='left'>
                        <template v-if='info.repayStatus != 40'>应还款日<span>{{info.lendEndDate || placeholder}}</span></template>
                    </p>
                    <p class='right' v-if='info.repayStatus === 0'>{{info.repayMsg || placeholder}}</p>
                    <p class='right paid' v-if='info.repayStatus === 40'>{{(info.repayDate.indexOf("已超过约定交付日") > -1) ? info.repayDate : '订单完成'}}</p>
                </div>
            </div>

            <div class="list-title">订单详情</div>
            <ul class="list">
                <li class='list-item'>
                    <span class="key">手机型号</span>
                    <p class="value">{{info.modelDevice || placeholder}}</p>
                </li>
                <li class='list-item'>
                    <span class="key">回收定金</span>
                    <p class="value">{{info.earnest | toYuan}}</p>
                </li>
                <li class='list-item'>
                    <span class="key">回收预付款</span>
                    <p class="value">{{info.advanceCharge | toYuan}}</p>
                </li>
                <li class='list-item'>
                    <span class="key">滞纳金</span>
                    <p class="value">{{info.overdueAmount | toYuan}}</p>
                </li>
                <li class='list-item' v-if='info.repayStatus === 40'>
                    <span class="key">约定交付日</span>
                    <p class="value">{{info.repayDate || placeholder}}</p>
                </li>
                <li class='list-item' v-if='info.agreement'>
                    <span class="key">交易合同</span>
                    <a class="value link" :href='info.agreement.href'>{{info.agreement.alt || placeholder}}</a>
                </li>
                <li class='list-item' v-if='info.report'>
                    <span class="key"></span>
                    <a class="value link" :href='info.report.href'>{{info.report.alt || placeholder}}</a>
                </li>
                <li class='list-item' v-if='info.relieveAgreement'>
                    <span class="key"></span>
                    <a class="value link" :href='info.relieveAgreement.href'>{{info.relieveAgreement.alt || placeholder}}</a>
                </li>
            </ul>

            <!-- <p class="page-placeholder" v-if='!records.length'><span>暂无历史记录</span></p> -->
        </div>

        <div class="footer" v-if='info.repayStatus === 0 && info.lendStatus === 40'>
            <template v-if='info.isBreachOfContract === 0'>
                <div class="pay-buttons">
                    <div class="pay-button" @click='show_confirm_tip = true'>交付手机</div>
                    <div class="pay-button black" @click='show_confirm_cancle = true'>取消交易</div>
                </div>
            </template>
            <template v-if='info.isBreachOfContract === 1'>
                <div class="pay-buttons">
                    <div class="pay-button red" @click='showPayDetail = true'>支付违约金</div>
                </div>
                <!-- <picker-list  class="picker" :list='dataList' placeholder='我想延长约定交付日'></picker-list> -->
            </template>
            <div class="footer-picker">
                <p>我想延长约定交付日</p>
                <picker-list id='extendDays' :list='dataList' placeholder='我想延长约定交付日' @done='setExtendDays'></picker-list>
            </div>
        </div>

        <!-- <div class="footer" v-if='info.lendStatus === 0'>
            <div class="button disabled">待放款</div>
            <p>超期未还将产生逾期费用，失信记录将上传央行征信系统</p>
        </div> -->

        <confirm 
            class='confirm-repay'
            :show='show_confirm_tip'
            close-text=''
            confirm-text='我知道了'
            @confirm='show_confirm_tip = false'
            title='交付手机'>
            <p>已通知上门回收人员，请等待电话联系。</p>
        </confirm>

        <confirm 
            class='confirm-repay'
            :show='show_confirm_repay'
            close-text=''
            confirm-text='我知道了'
            @confirm='show_confirm_repay = false'
            title='还款提示'>
            <p>请还款至以下任意账户</p>
            <p class='color-blue' v-for='item in configInfoAccounts'>{{item}}</p> 
            <p>或联系客服。</p>
        </confirm>

        <confirm 
            :show='show_confirm_cancle'
            close-text='不取消了'
            confirm-text='确定取消交易'
            @confirm='pay'
            @close='show_confirm_cancle = false'
            title='确定取消交易？'>
            <p>取消交易后需要支付违约金</p>
        </confirm>

        <pay-detail
            v-if='info.repayAmount'
            :amount='info.repayAmount'
            title='支付违约金'
            :show='showPayDetail'
            @close='showPayDetail=false'
            @finish='payDetailfinish'></pay-detail>

        <pay-detail
            v-if='extendMoney'
            title='支付延期费'
            :amount='extendMoney'
            :show='showExtendMoney'
            @close='showExtendMoney=false'
            @finish='extendDetailfinish'></pay-detail>

        <login
            :show='showLogin'
            @finish='loginGetInfo'
            @showAgreement='show_agreement = true'
            @close='loginCloseHandle'></login>

        <agreement
            :show='show_agreement'
            type='register'
            @close='show_agreement=false'></agreement>

    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import loading from '../components/Loading.vue'
    import loadingMore from '../components/LoadingMore.vue'
    import toYuan from '../filters/filter-toYuan'
    import dateFormat from '../filters/filter-dateFormat'
    import payDetail from '../components/PayDetail.vue'
    import confirm from '../components/Confirm.vue'
    import login from '../components/Login.vue'
    import agreement from '../components/Agreement.vue'
    import smsCode from '../components/SmsCode.vue'
    import pickerList from '../components/PickerList.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { allApi, userApi, billApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            loading,
            login,
            agreement,
            loadingMore,
            payDetail,
            smsCode,
            footerBar,
            confirm,
            pickerList
        },
        filters:{
            toYuan
        },
        data() {
            return {
                placeholder:'--',
                extendMoney:'',
                extendDays:'',
                records:[],
                info:{},
                showLogin:false,
                show_confirm_repay:false,
                show_confirm_cancle:false,
                show_agreement:false,
                show_confirm_tip:false,
                goBackLink:false,
                showSmsCode:false,
                showPayDetail:false,
                showExtendMoney:false,
                complete:false,
                loading:true,
                loading_count:true,
                dataList: [],
                date: ''
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            sessionId(){
                return this.localInfo.sessionId
            },
            configInfo(){
                return this.localInfo.configInfo || {}
            },
            configInfoAccounts(){
                if(this.configInfo.underLineAccountNo){
                    return this.configInfo.underLineAccountNo.split(',')
                }
                return []
            },
            jumpUrl(){
                let href
                if(this.configInfo.serviceCall){
                    href = `tel:${this.configInfo.serviceCall}`
                }
                else{
                    href = this.configInfo.serviceUrl
                }
                return href
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            loginCloseHandle(){
                if(!this.sessionId){
                    this.setMsgTip({
                        text:'请登录',
                        type:'warn'
                    })
                }
            },
            log(eventName,eventLabel){
                let eventParams = {}
                if(eventLabel){
                    eventParams = {
                        e_n:eventName,
                        e_v:{
                            value:eventLabel
                        }
                    }
                }
                else{
                    eventParams = {
                        e_n:eventName
                    }
                }
                allApi.log(eventParams)
            },
            payDetailfinish(obj){
                console.log(obj)
                let cardId = obj.cardId

                this.showLoading()
                billApi.promptRepay({
                    id:this.info.id,
                    cardId:cardId,
                    callBackUrl:location.href
                })
                .then(result=>{
                    this.hideLoading()
                    location.href = result
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            extendDetailfinish(obj){
                console.log(obj)
                let cardId = obj.cardId

                this.showLoading()
                billApi.promptExtend({
                    extendDays:this.extendDays,
                    extendAmount:this.extendMoney,
                    id:this.info.id,
                    cardId:cardId,
                    callBackUrl:location.href
                })
                .then(result=>{
                    this.hideLoading()
                    location.href = result
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            loginGetInfo(){
                this.showLogin = false
                this.getInfo()
            },
            pay(){
                if(!this.configInfo.needBankCardAuth){
                    this.setMsgTip({
                        text:'还款请联系您的专属工作人员',
                        type:'warn',
                        time:5000
                    })
                    return
                }
                this.cancelTransaction()
                this.show_confirm_tip = false
                this.showPayDetail = true
            },
            cancelTransaction(){
                billApi.cancelTransaction({
                    id:this.$route.params.id
                })
                .then(result=>{

                })
                .catch(error => {
                    console.error(error)
                })
            },
            getInfo(){
                this.showLoading()
                billApi.billDetail({
                    id:this.$route.params.id
                })
                .then(result=>{
                    this.hideLoading()
                    this.info = result
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            replaceStr(str){
                return str.replace(/([&?])status=[^&]*(&)?/g, function(p0, p1, p2) {
                    console.log(p0)
                    console.log(p1)
                    console.log(p2)
                    return p1 === '?' || p2 ? p1 : '';
                });
            },
            setRecords(records){
                this.records = records
            },
            setExtendDays(value) {
                this.extendDays = value
                this.showLoading()
                billApi.confirmExtendAmount({
                    id:this.$route.params.id,
                    extendDays:value
                })
                .then(result=>{
                    this.hideLoading()
                    this.extendMoney = result.confirmExtendAmount
                    this.showExtendMoney = true
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            }
        },
        created(){
            let arr = JSON.parse(window.localStorage.extendDays) || []
            let newArr = []
            _.each(arr,(value,index)=>{
                newArr.push({
                    value:value,
                    display:value+'天'
                })
            })
            this.dataList = newArr
            if(!this.sessionId){
                this.showLogin = true
            }
            this.getInfo()

            let status = this.$route.query.status
            let link = this.replaceStr(location.href)
            history.replaceState({page:'reload'},null,link)

            let msg = decodeURIComponent(this.$route.query.msg)
            if(status == 'fail'){
                this.setMsgTip({
                    text:msg,
                    type:'error'
                })
            }
            if(status == 'success'){
                this.setMsgTip({
                    text:'还款成功',
                    type:'success'
                })
                this.$router.push({
                    name:'bill'
                })
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    #bill-detail{
        .header{
            padding-top: 8px;
            margin: 0 16px;
            text-align: center;
            overflow:hidden;
            background: rgba(255,255,255,0.20);
            border-bottom: 1px solid $sectionColor;
        }
        .header-money{
            border-bottom: 1px solid $sectionColor;
            padding-bottom: 22px;
            h2{
                @extend %font-caption;
                font-weight: 300;
                padding-top: 8px;
                padding-bottom: 6px;
            }
            p{
                @extend %font-headline;
                font-size: 45px;
                line-height: 68px;
                color:$importColor;
                font-weight: normal;
            }
            span{
                @extend %font-caption;
                display: block;
                margin-top: -8px;
            }
        }
        .header-date{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 16px;
            padding-bottom: 16px;
            .left{
                display: flex;
                @extend %font-caption;
                span{
                    display: block;
                    padding-left: 8px;
                    color:$importColor;
                }
            }
            .right{
                color:$orange;
                &.paid{
                    color:$importColor;
                }
            }
        }
        .list-title{
            @extend %font-caption;  
            background: url(../images/bg_title@3x.png) no-repeat center center;
            background-size: 104px 26px;
            -webkit-background-size: 104px 26px;
            width: 106px;
            height: 26px;
            margin:16px auto;
            line-height: 26px;
            text-align: center;
            color:$importColor;
        }
        .list{
            padding-left:24px;
            padding-right: 16px;
        }
        .list-item{
            display: flex;
            padding: 8px 0;
            justify-content: space-between;
            align-items: center;
            color:$importColor;
            &:last-child{
                border-bottom: none;
            }
            .left{
                p{
                    @extend %font-subhead;
                    color:$importColor;
                }
                span{
                    @extend %font-caption;
                }
            }
            .right{
                display: flex;
                p{
                    @extend %font-body1;
                    padding-right: 8px;
                }
                .iconfont{
                    width: 24px;
                    text-align: center;
                    height: 24px;
                    line-height: 24px;
                }
            }
            .link{
                color:$blue;
            }
        }
        .footer{
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 13px 0 0 0;
            text-align: center;
            background: $backgroundColor;
            // box-shadow: 0 0 4px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.12);
            .pay-buttons{
                display: flex;
                justify-content: center;
            }
            .pay-button{
                @extend %font-button;
                display: block;
                box-sizing: border-box;
                width: 140px;
                height: 38px;
                line-height: 38px;
                border:1px solid $themeColor;
                margin: 0 8px;
                background-color: $themeColor;
                border-radius: 18px;
                color:#fff;
                &:active{
                    background-color: darken($themeColor,10%);
                }
                &.black{
                    border-color:#212121;
                    background-color: #212121;
                    color:#fff;
                    &:active{
                        background-color: darken(#212121,10%);
                    }
                }
                &.red{
                    border-color:#DD2C00;
                    background-color: #DD2C00;
                    color:#fff;
                    &:active{
                        background-color: darken(#DD2C00,10%);
                    }
                }
            }
            a{
                display: block;
                text-align: center;
                color:$blue;
                padding-top: 14px;
                font-size: 12px;
            }
        }
        .confirm-repay{
            p{
                line-height: 1.3;
                &.color-blue{
                    @extend %font-subhead;
                }
            }
        }
        .footer-picker {
            position: relative;
            p{
                @extend %font-caption;
                color:$blue;
                padding: 10px;
            }
            .component-picker-list {
                opacity:0.01;
                position: absolute;
                padding-right: 0;
                z-index:2;
                bottom: 0;
                width: 100%;
                display: flex;
                justify-content: center;
                input{
                    width: 100%;
                }
            }
        }
    }

</style>
